import React from 'react'
import './SessionCard.css'

function SessionCard({ session }) {
  const statusColors = {
    'in-progress': '#52c41a',
    'paused': '#1890ff',
    'not-started': '#faad14'
  }

  const statusColor = statusColors[session.status] || '#d9d9d9'

  return (
    <div className="session-card">
      <div className="status-bar" style={{ backgroundColor: statusColor }}></div>
      
      <div className="card-content">
        <div className="card-left">
          {/* Tags */}
          <div className="tags">
            {session.tags.map((tag, index) => (
              <span 
                key={index} 
                className={`tag ${tag === '王者荣耀' ? 'tag-premium' : ''}`}
              >
                {tag === '王者荣耀' && (
                  <svg className="crown-icon" width="12" height="12" viewBox="0 0 12 12" fill="none">
                    <path d="M6 1L4.5 4.5L1 3L2 7L6 6L10 7L11 3L7.5 4.5L6 1Z" fill="#faad14"/>
                  </svg>
                )}
                {tag}
              </span>
            ))}
          </div>

          {/* Title */}
          <div className="session-title">
            <span className="title-main">{session.title}</span>
            <span className="title-subtitle">》 {session.subtitle}</span>
          </div>

          {/* Participants */}
          <div className="participants">
            <div className="participant-group">
              <span className="participant-label">创建者</span>
              <div className="avatars">
                {session.creator.slice(0, 2).map((avatar, index) => (
                  <div key={index} className="avatar" style={{ background: `hsl(${(index * 60) % 360}, 60%, 50%)` }}>
                    {typeof avatar === 'string' && avatar.length > 0 ? avatar.charAt(0).toUpperCase() : ''}
                  </div>
                ))}
                {session.creatorCount > 0 && (
                  <div className="avatar-more">+{session.creatorCount}</div>
                )}
              </div>
            </div>
            <div className="participant-group">
              <span className="participant-label">协作者</span>
              <div className="avatars">
                {session.collaborator.slice(0, 2).map((avatar, index) => (
                  <div key={index} className="avatar" style={{ background: `hsl(${(index * 60 + 120) % 360}, 60%, 50%)` }}>
                    {typeof avatar === 'string' && avatar.length > 0 ? avatar.charAt(0).toUpperCase() : ''}
                  </div>
                ))}
                {session.collaboratorCount > 0 && (
                  <div className="avatar-more">+{session.collaboratorCount}</div>
                )}
              </div>
            </div>
          </div>

          {/* Time and Location */}
          <div className="session-info">
            <div className="time-range">
              {session.startTime} - {session.endTime}
            </div>
            <div className="location">{session.location}</div>
          </div>
        </div>

        <div className="card-right">
          <button className="action-button">{session.actionButton}</button>
          <button className="more-button">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
              <circle cx="8" cy="4" r="1.5" fill="#666"/>
              <circle cx="8" cy="8" r="1.5" fill="#666"/>
              <circle cx="8" cy="12" r="1.5" fill="#666"/>
            </svg>
          </button>
        </div>
      </div>
    </div>
  )
}

export default SessionCard

